﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--商品详情页</title>
	 <link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />

	<style type="text/css">
		ul.pagination {
			display: inline-block;
			padding: 0;
			margin: 0;
		}

		ul.pagination li {
			display: inline;
		}

		ul.pagination li a {
			color: black;
			float: left;
			padding: 8px 16px;
			text-decoration: none;
		}

		.goods-intro-list li {
			display: inline-block;
			width: 300px;
		}

		.Ptable {
			margin: 10px 0;
		}

		.Ptable-item {
			padding: 12px 0;
			line-height: 220%;
			color: #999;
			font-size: 12px;
			border-bottom: 1px solid #eee;
		}

		.Ptable-item h3 {
			width: 110px;
			text-align: right;
		}

		.Ptable-item h3, .package-list h3 {
			font-weight: 400;
			font-size: 12px;
			float: left;
		}

		h3 {
			display: block;
			font-size: 1.17em;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
			font-weight: bold;
		}

		.Ptable-item dl {
			margin-left: 110px;
		}

		dl {
			display: block;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
		}

		.Ptable-item dt {
			width: 160px;
			float: left;
			text-align: right;
			padding-right: 5px;
		}

		.Ptable-item dd {
			margin-left: 210px;
		}

		dd {
			display: block;
			-webkit-margin-start: 40px;
		}

		.package-list {
			padding: 12px 0;
			line-height: 220%;
			color: #999;
			font-size: 12px;
			margin-top: -1px;
		}

		.package-list h3 {
			width: 130px;
			text-align: right;
		}

		.package-list p {
			margin-left: 155px;
			padding-right: 50px;
		}

		.comment_name {
			margin-left: 10px;
			color: black;
			font-size: 13px;
			font-weight: bolder;
		}


		.del {
			float: right;
		}

		.comment {
			width: 900px;
			margin-top: 10px;
		}

		.comment_content {
			clear: both;
			margin: 5px 50px;
			font-size: 13px;
		}
	</style>

</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<div id="itemApp">
	<div id="nav-bottom">
		<ly-top />
	</div>
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li th:each="category : ${categories}">
						<a href="#" th:text="${category.name}">手机</a>
					</li>
					<li>
						<a href="#" th:text="${brand.name}">Apple666</a>
					</li>
					<li class="active" th:text="${spuName}">Apple iPhone 6s</li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
							</span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<li v-for="(image,i) in images" :key="i">
										<img :src="image" :bimg="image" onmousemove="preview(this)" />
									</li>
								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4>{{selectedSku.title}}</h4>
					</div>
					<div class="news"><span th:utext="${subTitle}">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title"><i>价　　格</i></div>
							<div class="fl price">
								<i>¥</i><em>{{ly.formatPrice(selectedSku.price)}}</em><span>降价通知</span>
							</div>
							<div class="fr remark"><i>累计评价</i><em>612188</em></div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">上海 <span>有货</span></em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div id="specification" class="summary-wrap clearfix">
							<dl v-for="(value,key,index) in specialSpec" :key="index">
								<dt>
									<div class="fl title">
									<i>{{params[key]}}</i>
								</div>
								</dt>
								<dd v-for="(v,i) in value" :key="i">
									<a href="javascript:;" :class="{selected:indexes[key]==i}" @click="indexes[key]=i">
										{{v}}<span title="点击取消选择">&nbsp;</span>
									</a>
								</dd>
							</dl>
						</div>

						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" disabled v-model="num" minnum="1" class="itxt" />
										<a href="javascript:void(0)" @click="increment" class="increment plus">+</a>
										<a href="javascript:void(0)" @click="decrement" class="increment mins">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a href="javascript:void(0)" class="sui-btn  btn-danger addshopcar" @click="addCart">加入购物车</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="/img/_/l-m01.png" />
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div id="">
											<img src="/img/_/dp01.png" />
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>39</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp02.png" /> </div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>50</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp03.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>59</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp04.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>99</span>
  </label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit"><strong>套餐价</strong></div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab" @click="scoreMethod('')">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<ul class="goods-intro-list unstyled" style="list-style: none;">
									<li>分辨率：1920*1080(FHD)</li>
									<li>后置摄像头：1200万像素</li>
									<li>前置摄像头：500万像素</li>
									<li>核 数：其他</li>
									<li>频 率：以官网信息为准</li>
									<li>品牌： Apple</li>
									<li>商品名称：APPLEiPhone 6s Plus</li>
									<li>商品编号：1861098</li>
									<li>商品毛重：0.51kg</li>
									<li>商品产地：中国大陆</li>
									<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
									<li>系统：苹果（IOS）</li>
									<li>像素：1000-1600万</li>
									<li>机身内存：64GB</li>
								</ul>
								<!--商品详情-->
								<div class="intro-detail" th:utext="${detail.description}">
									<img src="/img/_/intro01.png" />
									<img src="/img/_/intro02.png" />
									<img src="/img/_/intro03.png" />
								</div>
							</div>
							<div id="two" class="tab-pane">
								<div class="Ptable">
    <div class="Ptable-item">
        <h3>主体</h3>
        <dl>
            <dt>品牌</dt><dd>华为（HUAWEI）</dd>
            <dt>型号</dt><dd>CLT-AL00</dd>
            <dt>入网型号</dt><dd>CLT-AL00</dd>
            <dt>上市年份</dt><dd>2018年</dd>
            <dt>上市月份</dt><dd>4月</dd>
        </dl>
    </div>
    <div class="Ptable-item">
        <h3>基本信息</h3>
        <dl>
            <dt>机身颜色</dt><dd>宝石蓝</dd>
            <dt>机身长度（mm）</dt><dd>155.0 </dd>
            <dt>机身宽度（mm）</dt><dd>73.9 </dd>
            <dt>机身厚度（mm）</dt><dd>7.8</dd>
            <dt>机身重量（g）</dt><dd>约180g（含电池）</dd>
            <dt>输入方式</dt><dd>触控</dd>
            <dt>运营商标志或内容</dt><dd>无</dd>
            <dt>机身材质分类</dt><dd>玻璃后盖</dd>
        </dl>
    </div>
</div>
<div class="package-list">
    <h3>包装清单</h3>
    <p>手机X1、快速指南X1、华为SuperCharge 充电器X1、三包凭证X1、Type-C 数字耳机X1、Type-C 数据线X1、取卡针X1、TPU保护壳X1、USB Type-C转3.5mm耳机转接线X1（备注：最终以实物为准）</p>
</div>

							</div>
							<div id="three" class="tab-pane">
								<p>售后保障</p>
							</div>
							<div id="four" class="tab-pane">
								<h3>商品评价</h3>
								<hr/>
								<input type="checkbox" @change="scoreMethod('')" v-model="showSku">只显示当前商品评论</input>&nbsp;
								&nbsp; &nbsp;
								<input type="button" value="全部评论" @click="scoreMethod('')">&nbsp; &nbsp; &nbsp;
								<input type="button" value="晒图" @click="scoreMethod('0')">&nbsp; &nbsp; &nbsp;
								<input type="button" value="好评" @click="scoreMethod('1')">&nbsp; &nbsp; &nbsp;
								<input type="button" value="中评" @click="scoreMethod('2')">&nbsp; &nbsp; &nbsp;
								<input type="button" value="差评" @click="scoreMethod('3')">&nbsp; &nbsp; &nbsp;
								<hr>
								<div class="comment" v-for="(value,index) in items" :key="index">
									<div class="conmment_details">
										<div style="float:left;">
											<span class="comment_name">{{value.userName}}</span>&nbsp; &nbsp; &nbsp;&nbsp;
											&nbsp;&nbsp;
											<span>评分:{{value.score}} 分</span>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
											<span>{{ly.formatDate(value.createTime)}}</span>
										</div>
										<div class="del">
											<a class="icon layui-icon" href="javascript:;"
											   @click="updateLikeNum(value.commentId,value.likeNum)">赞({{value.likeNum}})</a>
										</div>
										<br/>
										<div class="comment_content">
											<h4>评论内容: </h4>{{value.content}}<br/>
											<div>
												<h4 v-if="value.images">晒图: </h4><img v-for="(image,i) in value.images"
																					  :key="i" width="100" height="150"
																					  :src="image"><br/>
												<h6 v-if="value.addContent">追评:&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;<h9>{{ly.formatDate(value.addTime)}}</h9></h6>{{value.addContent}}
											</div>
											<br/>
											<div v-if="value.commentChildren" v-for="(childContent,key) in value.commentChildren" :key="key">
												<hr/>
												<h9>{{ly.formatDate(childContent.createTime)}}</h9> <br/>
												<h8>{{childContent.userName}}&nbsp;&nbsp;:&nbsp;&nbsp; </h8>{{childContent.content}} <a class="del" href="javascript:;" @click="(childId = childContent.childId,showReplyChild = !showReplyChild,replyChildName = childContent.userName)">回复</a> <br/>
												<div v-if="childContent.commentChildrenX" v-for="(replyChild,kk) in childContent.commentChildrenX" :key="kk">
													<br/>
													<h9>{{ly.formatDate(replyChild.createTime)}}</h9> <br/>
													<h8>{{replyChild.userName}}&nbsp;&nbsp;回复&nbsp;&nbsp;&nbsp;{{replyChild.replyName}} &nbsp;:</h8> {{replyChild.content}}
													<a class="del" href="javascript:;" @click="(childId = childContent.childId,showReplyChild = !showReplyChild,replyChildName = replyChild.userName)">回复</a> <br/>
												</div>
												<div v-show="childContent.childId == childId && showReplyChild">
													<div class='reply_textarea'>
														<textarea name='' cols='40' rows='5' v-model="replyChildContent"></textarea><br/>
														<input type='button' value='发表' @click="replyChildComment(value.commentId,childContent.childId)"/>
													</div>
												</div>
											</div>

											<div v-show="value.commentId == commentId && showText">
												<div class='reply_textarea'>
													<textarea name='' cols='40' rows='5' v-model="childContent"></textarea><br/>
													<input type='button' value='发表' @click="replyContent(value.commentId)"/>
												</div>
											</div>
											<div v-show="value.commentId == commentId && showAdd">
												<div class='reply_textarea'>
													<textarea name='' cols='40' rows='5' v-model="addContent"></textarea><br/>
													<input type='button' value='发布' @click="addContentMethod(value.commentId)"/>
												</div>
											</div>
											<a href="javascript:;" @click="(showText = !showText,commentId = value.commentId)">发表评论</a>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
											<a href="javascript:;" v-if="userInfo.id == value.userId && value.addCount == 0" @click="(commentId = value.commentId,showAdd = !showAdd)">追评</a>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
										</div>
									</div>
									{{value.ownSpec}}
									<hr style="height:2px;border-color:gainsboro;"/>
								</div>

								<div>
									<ul class="pagination">
										<li><a href="javascript:void(0)" @click="topage(1)">««</a></li>
										<li><a href="javascript:void(0)" @click="prevPage">«</a></li>
										<li :class="{active:index(i)== page}" v-for="i in Math.min(5,totalPage)">
											<a href="javascript:void(0)" @click="topage(index(i))">{{index(i)}}</a>
										</li>
										<li><a href="javascript:void(0)" @click="nextPage">»</a></li>
										<li><a href="javascript:void(0)" @click="topage(totalPage)">»»</a></li>
									</ul>
									<span>共{{totalPage}}页&nbsp;</span>
								</div>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike01.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>3699.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike02.png" />
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4388.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike03.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike04.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike05.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike06.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>

<script th:inline="javascript">
	//1.取出spuDetail对象
    const detail = /*[[${detail}]]*/ {};
    //2.取出spuDetail的specialSpec，转换为json对象
    let specialSpec = JSON.parse(detail.specialSpec);

	//设置对象: {4:'颜色','12','内存'...}
	let params = {};
	//取出所有参数组
    const specs = /*[[${specs}]]*/ [];
    //取出所有特有的规格参数数据
	specs.forEach(spec=>{ //遍历所有组
	    //遍历组内规格参数
        spec.params.forEach(param=>{
            //选出特有的规格参数即可
			if(!param.generic) {
                params[param.id] = param.name;
            }
		})
	})

	//定义一个对象，用于存储当前选择的特有规格参数
	let indexes = {};
	//给indexes初始化为第一个参数默认选中
    for(let key in params){
        indexes[key] = 0;
	}

	//取出当前商品的所有sku对象
    const skus = /*[[${skus}]]*/ [];
</script>

<script>
    var itemVm = new Vue({
        el:"#itemApp",
        data:{
            specialSpec,
            params,
            indexes,
            skus,
			ly,
			num: 1, //购买的商品数量
			//--------------------------
			userInfo: [],
			showSku: false, //是否查询当前商品
			commentId:'',
			childId:'',  //子评论的Id
			page: 1, //当前页
			score: '',//查询评论分类过滤参数
			showText: false,//显示回复文本框
			showAdd: false,//显示追评文本框
			showReplyChild: false,//显示子评论下的回复框
			replyChildName:'', ////子评论下的回复的被回复人
			replyChildContent:'',//子评论下的回复
			addContent:'',//追评内容
			childContent:'',//回复内容
			items: [],//当前页数据列表
			total: 0,//总记录数
			totalPage: 0,//总页数
        },
		computed:{
           //定义当前选中的Sku对象
			selectedSku(){
			    //selectedSku对象的值会随着indexes的变化而变化
				//1.把indexes变量转换为字符串格式：3_0_0
				//Object.values(): 将指定对象的所有value值取出，返回给数组格式
                //join(): 数组的方法，把数组的每个元素使用指定分隔分隔，返回字符串
				let indexStr = Object.values(this.indexes).join("_");

				/*let selectSku = {};
				this.skus.forEach(sku=>{
				    if(sku.indexes==indexStr){
                        selectSku = sku;
					}
				})
				return selectSku;*/

				//find(): 从数组匹配符合条件的对象，并返回符合条件对象
			    return this.skus.find(sku=>sku.indexes==indexStr);
			},
			//记录当前选中的Sku的图片列表
			images(){
			    return this.selectedSku.images.split(",") || [];
			}
		},
		methods:{
            //判断用户是否登录方法
			verifyUser(){
                return ly.http.get('/auth/verify');
			},

           //添加购物车
            addCart(){
				//判断用户是否登录
				this.verifyUser().then(resp=>{
				    //已经登录

					ly.http.post('/cart',{
                        skuId: this.selectedSku.id,
                        title: this.selectedSku.title,
                        price: this.selectedSku.price,
                        image: this.images[0],
                        num: this.num,
                        ownSpec:this.selectedSku.ownSpec
                    }).then(resp=>{
                        //跳转到购物车页面
                        window.location.href="http://www.leyou.com/cart.html";
					}).catch(e=>{
                        console.log('添加购物车失败');
					})

				}).catch(e=>{
				    //未登录

					//判断当前商品是否已经存在于购物车
					//1）取出现在的购物车的数据
					let carts = ly.store.get('LY_CART') || [];

					//在carts数组查询sku的id相等的商品
					let cart = carts.find(cart=>cart.skuId==this.selectedSku.id);

					if(cart){
                        //如果存在，则当前商品数量增加
						cart.num += this.num;
					}else{
                        //如果不存在，则添加新的商品对象
                        carts.push(
                            {
                                skuId: this.selectedSku.id,
                                title: this.selectedSku.title,
                                price: this.selectedSku.price,
                                image: this.images[0],
                                num: this.num,
                                ownSpec:this.selectedSku.ownSpec
                            }
						);
					}

					//重新写回localStorage
					ly.store.set('LY_CART',carts);
					//跳转到购物车页面
					window.location.href="http://www.leyou.com/cart.html";
				});
			},

            //增加数量
            increment(){
				this.num++;
            },

            //减少数量
            decrement(){
				if(this.num>1){
				    this.num--;
				}
            },
			//上一页
			prevPage() {
				if (this.page > 1) {
					this.page--;
				}
			},
			//下一页
			nextPage() {
				if (this.page < this.totalPage) {
					this.page++;
				}
			},
			//页数改变
			changePage(score) {
				if (this.showSku) {
					ly.http.get('/comment/skuComment',
							{
								params: {
									skuId: this.selectedSku.id,
									page: this.page,
									score: score
								}
							}).then(resp => {
						this.items = resp.data.items;
					}).catch(error => {
						console.log('展示评价错误')
					})
				} else if (!this.showSku) {
					ly.http.get('/comment/spuComment',
							{
								params: {
									spuId: this.selectedSku.spuId,
									page: this.page,
									score: score
								}
							}).then(resp => {
						this.items = resp.data.items;
					}).catch(error => {
						console.log('展示评价错误')
					})
				}
			},
			//商品分页
			index(i) {
				if (this.page <= 3 || this.totalPage <= 5) {
					return i;
				} else if (this.page >= this.totalPage - 2) {
					return this.totalPage - 5 + i;
				} else {
					return this.page - 3 + i;
				}
			},
			topage(i) {
				this.page = i;
			},
			//修改点赞数
			updateLikeNum(id, likeNum) {
				ly.http.get('/comment/updateLikeNum', {
					params: {
						"commentId": id,
						"likeNum": likeNum
					}

				}).then(resp => {
					this.changePage(this.score);
				}).catch(error => {
				})
			},
			//通用评论查询方法
			scoreMethod(score) {
				if (score == '1' || score == '2' || score == '3' || score == "0") {
					this.page = 1;
				}
				this.score = score;
				if (this.showSku) {
					ly.http.get('/comment/skuComment',
							{
								params: {
									skuId: this.selectedSku.id,
									page: this.page,
									score: this.score
								}
							}).then(resp => {
						this.items = resp.data.items;
						this.total = resp.data.total;
						this.totalPage = resp.data.totalPage;
					}).catch(error => {
						console.log('展示评价错误')
					})
				} else if (!this.showSku) {
					ly.http.get('/comment/spuComment',
							{
								params: {
									spuId: this.selectedSku.spuId,
									page: this.page,
									score: this.score
								}
							}).then(resp => {
						this.items = resp.data.items;
						this.total = resp.data.total;
						this.totalPage = resp.data.totalPage;
					}).catch(error => {
						console.log('展示评价错误')
					})
				}
			},
			//追加评论
			addContentMethod(commentId) {
				ly.http.get('/auth/verify').then(resp => {
					ly.http.get('/comment/addContent',{
						params: {
							commentId: commentId,
							addContent: this.addContent
						}
					}).then(resp=>{
						this.changePage(this.score)
						this.showAdd = false;
					}).catch(error=>{
						console.log('追加评论失败!')
					})
				}).catch(error=>{
					alert('未登录,请您登陆!')
				})
			},
			//回复评论
			replyContent(commentId) {
				ly.http.get('/auth/verify').then(resp => {
					ly.http.get('/comment/updateReplyComment',{
						params: {
							commentId: commentId,
							childContent: this.childContent
						}
					}).then(resp=>{
						this.changePage(this.score)
						this.showText = false;
					}).catch(error=>{
						console.log('回复评论失败!')
					})
				}).catch(error=>{
					window.location.href = "http://www.leyou.com/login.html?returnUrl="+ window.location.href;
				})
			},
			//子评论下的回复
			replyChildComment(commentId,childId) {
				ly.http.get('/auth/verify').then(resp => {
					ly.http.get('/comment/childReply',{
						params: {
							commentId: commentId,
							childId: childId,
							replyChildContent:this.replyChildContent
						}
					}).then(resp=>{
						this.changePage(this.score)
						this.showReplyChild = false;
					}).catch(error=>{
						console.log('回复评论失败!')
					})
				}).catch(error=>{
					window.location.href = "http://www.leyou.com/login.html?returnUrl="+ window.location.href;
				})
			}
		},
        components:{
            lyTop: () => import('/js/pages/top.js')
        },
		watch: {
			selectedSku: function () {
				this.page = 1;
				this.scoreMethod(this.score)
			},
			"page": {
				handler() {
					this.changePage(this.score);
				}
			}
		},
		created() {
			ly.http.get('/auth/verify').then(resp => {
				this.userInfo = resp.data;
			}).catch(error=>{
				console.log('用户未登录!')
			})
		}
    });
</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript" src="index/index.js"></script>


</body>

</html>